<template>
	<view class="container">
		<view class="padding-sm bg-white flex justify-start margin-top margin-bottom">
			<image :src="orderDetail.descPic" mode="" style="width: 100rpx;height: 100rpx;">
			</image>
			<text class="title">{{orderDetail.description}}</text>
		</view>
		<view class="solid-bottom text-13 flex justify-between align-center padding bg-white">
			<view class="text-333 text-bold">
				屏幕品牌
			</view>
			<view class="flex justify-start align-center" @click="showModal()">
				<view class="text-767696 margin-right-xs">
					{{brandName}}
				</view>
				<image :src="baseUrl + '/static/right.png'" mode="" style="width: 22rpx;height: 22rpx;"></image>
			</view>
		</view>
		<view class="solid-bottom bg-white text-13 flex justify-between align-center padding">
			<view class="flex justify-start align-center">
				<view class="text-bold text-333 margin-right">
					宽(cm)
				</view>
				<input type="number" v-model="width" value="" class="text-13" style="width: 180rpx;"
					placeholder="请填写物品宽度" />
			</view>
			<view class="flex justify-start align-center">
				<view class="text-bold text-333 margin-right">
					高(cm)
				</view>
				<input type="number" v-model="height" value="" class="text-13" style="width: 180rpx;"
					placeholder="请填写物品高度" />
			</view>
		</view>
		<view class="solid-bottom bg-white text-13 flex justify-between align-center padding">
			<view class="text-333 flex-sub text-bold">
				数量
			</view>
			<input type="number" value="" v-model="count" class="text-13 flex-treble" placeholder="请输入数量"/>
		</view>
		<view class="solid-bottom bg-white text-13 flex justify-between align-center padding">
			<view class="text-333 flex-sub text-bold">
				有无静电地板
			</view>
			<radio-group class="flex-treble flex justify-center align-center" @change="RadioChange1">
				<view class="flex justify-start align-center">
					<radio class="radio yellow" :class="floorType=='1'?'bg-white':''"
						:checked="floorType=='1'?true:false" value="1"></radio>
					<view class="title text-13 margin-left-xs">有</view>
				</view>
				<view class="flex justify-start align-center" style="margin-left: 120rpx;">
					<radio class="radio yellow" :class="floorType=='0'?'checked':''"
						:checked="floorType=='0'?true:false" value="0"></radio>
					<view class="title text-13 margin-left-xs">无</view>
				</view>
			</radio-group>
		</view>
		<view class="margin-bottom-sm bg-white text-13 flex justify-between align-center padding">
			<view class="text-333 flex-sub text-bold">
				墙壁是否承重
			</view>
			<radio-group class="flex-treble flex justify-center align-center" @change="RadioChange">
				<view class="flex justify-start align-center">
					<radio class="radio yellow" :class="wallType=='1'?'bg-white':''" :checked="wallType=='1'?true:false"
						value="1"></radio>
					<view class="title text-13 margin-left-xs">是</view>
				</view>
				<view class="flex justify-start align-center" style="margin-left: 120rpx;">
					<radio class="radio yellow" :class="wallType=='0'?'checked':''" :checked="wallType=='0'?true:false"
						value="0"></radio>
					<view class="title text-13 margin-left-xs">否</view>
				</view>
			</radio-group>
		</view>
		<view class="solid-bottom text-13 flex justify-between align-center padding bg-white">
			<view class="text-333 text-bold">
				安装时间
			</view>
			<view class="flex justify-start align-center" @click="visible = true">
				<view class="text-767696 margin-right-xs">
					{{installTime}}
				</view>
				<image :src="baseUrl + '/static/right.png'" mode="" style="width: 22rpx;height: 22rpx;"></image>
			</view>
		</view>
		<view style="padding-bottom: 0;padding-top: 34rpx;" class="padding-sm bg-white flex content margin-top">
			<textarea class="text-input" placeholder-style="color:#A7A7AF" v-model='content'
				placeholder="在这里填写你的勘察备注" />
			<view class="cu-form-group padding-top">
				<view class="grid col-3 grid-square flex-sub">
					<view class="bg-img" style="width: 150rpx;height: 150rpx;padding-bottom:0;"
						v-for="(item, index) in picList" :key="index">
						<image :src="item" style="width:100%;height: 100%;">
						</image>
						<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
							<text class="cuIcon-close"></text>
						</view>
					</view>
					<view class="solids" style="width: 150rpx;height: 150rpx;padding-bottom:0" @tap="ChooseImage">
						<text class="cuIcon-cameraadd"></text>
					</view>
				</view>
			</view>
		</view>

		<view class="confirm">
			<view class="btn" @click="submit">提交</view>
		</view>
		<w-picker :visible.sync="visible" mode="date" startYear="2021" endYear="2100" :current="true" fields="second"
			@confirm="onConfirm($event)" @cancel="visible = false" :disabled-after="false" ref="date" />
		<view class="cu-modal bottom-modal" :class="modalName=='bottomModal'?'show':''" @click="hideModal()">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-between">
					<view class="action text-green"></view>
					<view class="text-221815 text-17">
						选择屏幕品牌
					</view>
					<view class="action text-blue" @tap="hideModal">取消</view>
				</view>
				<scroll-view scroll-y="true" style="height: 200rpx;">
					<view class="flex justify-between align-center padding solid-bottom" v-for="item in brandList"
						@click="cheacked(item)">
						<view class=" flex justify-between align-center f-grow1">
							<view class="text-xl text-221815">
								{{item.brandName}}
							</view>
							<!-- 	<view class="text-sm text-999">
								{{item.worktype}}
							</view> -->
						</view>
						<image v-if="brand==item.brandId" :src="baseUrl + '/static/selected.png'" mode=""
							class="margin-left margin-right-sm" style="width: 26rpx;height: 26rpx;"></image>
						<image v-else :src="baseUrl + '/static/unselected.png'" mode=""
							class="margin-left margin-right-sm" style="width: 26rpx;height: 26rpx;"></image>
					</view>

				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		appConfig,
	} from '@/common/js/config.js'
	export default {
		data() {
			return {
				baseUrl: this.$config.baseUrl,
				content: '',
				picList: [],
				orderDetail: {},
				type: '',
				modalName: null,
				brand:'',
				brandName: '请选择',
				brandList: [],
				width: '',
				height: '',
				count: '',
				floorType: 1,
				wallType: 1,
				visible: false,
				installTime: '请选择'
			}
		},
		onLoad(option) {
			console.log(JSON.parse(option.item))
			this.orderDetail = JSON.parse(option.item)
			console.log(option.type)
			if (option.type) {
				this.type = option.type
			}
			this.getBrandList()
		},
		methods: {
			cheacked(e){
				this.hideModal()
				this.brand = e.brandId
				this.brandName = e.brandName
			},
			hideModal(){
				this.modalName = null
			},
			onConfirm(e) {
				this.installTime = e.result

			},
			RadioChange1(e) {
				this.floorType = e.detail.value
			},
			RadioChange(e) {
				this.wallType = e.detail.value
			},
			showModal() {
				this.modalName = 'bottomModal'
			},
			async getBrandList() {
				const [err, res] = await this.$get(this.$api.orderService_listScreenBrand)
				if (res) {
					this.brandList = res.data
					// console.log(res)

				}
			},
			submit() {
				console.log(this.content)
				const that = this
				uni.showModal({
					title: "提示",
					content: "确定要发布该勘察吗",
					cancelText: "取消",
					confirmText: "确定",
					success: (res) => {
						if (res.confirm) {
							if (!this.brand) {
								return this.$util.msg('屏幕品牌不能为空')
							}
							if (!this.width) {
								return this.$util.msg('宽不能为空')
							}
							if (!this.height) {
								return this.$util.msg('高不能为空')
							}
							if (!this.count) {
								return this.$util.msg('数量不能为空')
							}
							if (this.installTime == '请选择') {
								return this.$util.msg('安装时间不能为空')
							}
							if (!this.content) {
								return this.$util.msg('请输入勘察备注')
							}
							if (this.picList.length == 0) {
								return this.$util.msg('请上传图片')
							}
							const data = {
								descriptionReplyPic: this.picList.toString(),
								descriptionReply: this.content,
								brand:this.brand,
								count: this.count,
								height: this.height,
								installTime: this.installTime,
								width:this.width,
								userId: uni.getStorageSync('userId'),
								orderServiceId: this.orderDetail.id
							}
							if (this.orderDetail.shopId) {
								data['shopId'] = this.orderDetail.shopId
							}
							this.$post(this.$api.surveyScreenOrder, data).then(res => {
								console.log(res)
								const [err,
									rs
								] = res


								console.log(rs)
								if (rs) {
									console.log(rs)
									this.$util.msg(rs.message)

									setTimeout(function() {

										if (that.type == 2) {
											console.log(111)
											uni.navigateBack({
												delta: 2
											})
										} else {
											console.log(2222)
											uni.navigateBack({
												delta: 1
											})
										}

									}, 1000)
								}
							})

						}
					},
				});

			},
			async ChooseImage() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ["album"], //从相册选择
					success: (res) => {
						console.log(res);
						this.$upload(res.tempFilePaths[0]).catch((req) => {
							console.log(req);
							this.picList.push(req.data);
						});
					},
				});
			},
			DelImg(e) {
				uni.showModal({
					title: "提示",
					content: "确定要删除吗？",
					cancelText: "取消",
					confirmText: "确定",
					success: (res) => {
						if (res.confirm) {
							this.picList.splice(e.currentTarget.dataset.index, 1);
						}
					},
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.title {
		margin-top: 23rpx;
		margin-left: 17rpx;
	}

	.text-input {
		height: 229rpx;
	}

	.content {
		flex-direction: column;
		margin-top: 23rpx;
	}

	.confirm {
		margin-top: 100rpx;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 74rpx;

		.btn {
			width: 210rpx;
			height: 100%;
			background: linear-gradient(135deg, #F3AB1F, #EE7200);
			border-radius: 37rpx;
			color: #fff;
			font-size: 30rpx;
			font-weight: bold;
			text-align: center;
			line-height: 74rpx;
		}
	}
</style>
